<template>
  <div class="mt-16 mb-8">
    <a-space>
      <a-input :style="{width:'240px'}" placeholder="请输入脚本名称" allow-clear v-model="scriptName"/>
      <a-input :style="{width:'240px'}" placeholder="请输入脚本ID" allow-clear v-model="scriptId"/>
      <a-select :style="{width:'160px'}" placeholder="请选择脚本类型" :trigger-props="{ autoFitPopupMinWidth: true }">
        <a-option>script</a-option>
        <a-option>switch_script</a-option>
        <a-option>if_script</a-option>
        <a-option>for_script</a-option>
        <a-option>while_script</a-option>
        <a-option>break_script</a-option>
      </a-select>
      <a-select :style="{width:'150px'}" placeholder="请选择脚本语言" :trigger-props="{ autoFitPopupMinWidth: true }">
        <a-option>java</a-option>
        <a-option>js</a-option>
        <a-option>python</a-option>
        <a-option>lua</a-option>
      </a-select>
      <a-button type="primary" @click="initData">搜索</a-button>
    </a-space>
  </div>
  <div class="w-full text-right mb-3">
    <a-button type="primary" status="success" @click="addModalVisible=true">新增</a-button>
  </div>
  <a-table :columns="columns" :data="data">
    <template #optional="{ record }">
      <a-space>
        <a-button status="success" @click="openEditModal(record)">编辑</a-button>
        <a-popconfirm content="删除后无法恢复，您确定要删除吗?" @ok="deleteProject(record)">
          <a-button status="danger">删除</a-button>
        </a-popconfirm>
      </a-space>
    </template>
  </a-table>

  <a-modal v-model:visible="addModalVisible" title="新增脚本组件" @ok="addScriptCmp" @close="clearForm">
    <a-form :model="form">
      <a-form-item field="scriptId" label="脚本ID">
        <a-input v-model="form.scriptId" placeholder="请输入脚本ID"/>
      </a-form-item>
      <a-form-item field="scriptName" label="脚本名称" required>
        <a-input v-model="form.scriptName" placeholder="请输入脚本名称"/>
      </a-form-item>
      <a-form-item field="scriptType" label="脚本类型" required>
        <a-select :style="{width:'160px'}"
                  placeholder="请选择脚本类型"
                  :trigger-props="{ autoFitPopupMinWidth: true }"
                  :v-model="form.scriptType">
          <a-option>script</a-option>
          <a-option>switch_script</a-option>
          <a-option>if_script</a-option>
          <a-option>for_script</a-option>
          <a-option>while_script</a-option>
          <a-option>break_script</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="scriptLanguage" label="脚本语言" required>
        <a-select :style="{width:'150px'}"
                  placeholder="请选择脚本语言"
                  :trigger-props="{ autoFitPopupMinWidth: true }"
                  v-model="form.scriptLanguage">
          <a-option>java</a-option>
          <a-option>js</a-option>
          <a-option>python</a-option>
          <a-option>lua</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="scriptContent" label="脚本内容" required>
        <monaco-editor ref="codeEditor" class="code-editor" :lang="form.scriptLanguage" :val="form.scriptContent"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {reactive, ref} from 'vue';
import MonacoEditor from "../../../../components/MonacoEditor.vue";

export default {
  components: {MonacoEditor},
  setup() {
    const columns = [
      {
        title: 'code',
        dataIndex: 'code',
      },
      {
        title: '脚本ID',
        dataIndex: 'scriptId',
      },
      {
        title: '脚本名称',
        dataIndex: 'scriptName',
      },
      {
        title: '脚本类型',
        dataIndex: 'scriptType',
      }, {
        title: '脚本语言',
        dataIndex: 'scriptLanguage',
      }, {
        title: '最后更新时间',
        dataIndex: 'updateTime',
      },
      {
        title: '操作',
        slotName: 'optional'
      }
    ];
    const data = reactive([
      {
        code: '1',
        scriptId: 'Jane Doe',
        scriptName: 23000,
        scriptType: 'for_script',
        scriptLanguage: 'java',
        updateTime: '2021-01-01 12:00:00'
      }
    ]);

    const form = ref({
      scriptId: '',
      scriptName: '',
      scriptType: '',
      scriptLanguage: 'javascript',
      scriptContent: ''
    });

    const scriptName = ref('');
    const scriptId = ref('');
    const addModalVisible = ref(false);
    const codeEditorLang = ref('java');

    const initData = () => {
      console.log('initData')
    }

    const openEditModal = (record) => {
      console.log('openEditModal', record)
    }

    const deleteProject = (record) => {
      console.log('deleteProject', record)
    }

    const addScriptCmp = () => {
      console.log('addScriptCmp')
    }

    const clearForm = () => {
      form.value.scriptId = ''
      form.value.scriptName = ''
      form.value.scriptType = ''
      form.value.scriptLanguage = ''
    }

    return {
      columns,
      data,
      scriptName,
      scriptId,
      initData,
      addModalVisible,
      openEditModal,
      deleteProject,
      addScriptCmp,
      form,
      clearForm,
      codeEditorLang
    }
  },
}
</script>
<style scoped>
</style>